import React, { Component } from 'react'
import { CSSTransition,TransitionGroup } from 'react-transition-group'
import '../assets/css/base.css'
export default class transition extends Component {
    state={
        isShow:true,
        msg:'...',
        book_list:['book1','book2','book3']
    }
    add(event){
        if(event.keyCode === 13){
            console.log(event);
            var value = event.target.value;
            if(value){
                this.state.book_list.push(value)
                this.setState({})
                event.target.value=''
            }
        }
    }
    del(e){
        console.log('this is <li>');
        var list = this.state.book_list
        var value = e.target.innerText
        var index = list.indexOf(value)

        // var here = list.findIndex(index)
        list.splice(index,1)

        this.setState({})
        e.target.value=''

        // console.log(here);
        /* if(this.state.book_list.indexOf(value)!==-1){
            this.state.book_list.splice(value,0)
        } */

        // e.target.remove()
    }
    componentDidUpdate(){
        console.log(this.state.book_list);
    }
    render() {
        return (
            <>
            <CSSTransition unmountOnExit in={this.state.isShow} timeout={200} classNames='sh'>
                <h1>watch this</h1>
            </CSSTransition>
                {/* {this.state.isShow?<h1>watch this</h1>:''} */}
                <hr />
                <button type='button' onClick={()=>{
                    this.setState({isShow:!this.state.isShow})
                }}>
                    Click here
                </button>
                <hr />
                
                <input type="text" placeholder='name' onKeyDown={this.add.bind(this)} />
                <ul>
                    <TransitionGroup component={null}>
                        {this.state.book_list.map(item=>
                            <CSSTransition
                                timeout={500}
                                key={item}
                                classNames="sh add_delet"
                            >
                                <li
                                    onClick={this.del.bind(this)}
                                    
                                >{item}</li>
                            </CSSTransition>
                            )}
                    </TransitionGroup>
                </ul>
            </>
        )
    }
}
